<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid red;
    }

    .happy {
      background-color: red;
      border: 1px solid blue;
    }

    .sad {
      background-color: blue;
      border: 1px solid red;
    }

    .normal {
      background-color: green;
      border: 1px solid yellow;
    }

    .atguigu1 {
      background-color: aqua;
    }

    .atguigu2 {
      /* 文字加粗有阴影的颜色 */
      color: rgb(255, 0, 0);
    }

    .atguigu3 {
      /* 设置边框为圆角 */
      border-radius: 10px;
    }
  </style>
  <script type="text/javascript" src="../JS/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- 绑定样式:1.适用于其中有两个样式，其中一个知道，另一个可变 -->
    <div class="basic" :class="a" id="demo" @click="changeMood">{{name}}</div><br /><br />
    <!-- 2.适用于多个样式，用数组遍历 -->
    <div class="basic" :class="arr">{{name}}</div><br /><br />
    <!-- 3.适用于绑定确定的样式个数，但是需要动态的决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div><br /><br />
    <!-- 4.绑定style样式 -->
    <div class="basic" :style="styleObj"></div>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      a: 'normal',
      arr: ['atguigu1', 'atguigu2', 'atguigu3'],
      classObj: {
        atguigu1: false,
        atguigu2: false
      },
      styleObj: {
        fontSize: '40px',
        color: 'red'
      }
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.a = arr[index]
      }
    }
  })
</script>

</html>